<template>
	<view class="Storename">
		<statusBar />
		<!-- 设置 -->
		<view @tap="leftIndex" class="nav">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置-店铺设置-门店名称</view>
		</view>
		<view class="stores">
			<view>
				<view>
					<view>修改必知</view>
					<view>
						<view></view>
						<view>每个月仅允许成功修改1次，请谨慎修改</view>
					</view>
				</view>
				<view>
					<view></view>
					<view>
						提升修改成功率的方式：查看
						<text>门店命名规范</text>
					</view>
				</view>
			</view>
			<view>
				<view>
					<view>门店名称必须与门脸牌匾上的店名完全一致</view>
					<view>
						<view>门店名称</view>
						<view><input v-model="vname" type="text" value="" /></view>
					</view>
					<view @tap="upload">
						<view>门头背景图</view>
						<image :src="zhengmian" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="Login" @tap="modification">保存</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			zhengmian: '../../static/setup/xiangji.png',
			vname: '' //名称
		};
	},
	components: {
		statusBar
	},
	onLoad(options) {
		this.vname = options.name
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 接口
		modification() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/store-save', 'POST', {
				name: this.vname,
				icon:this.zhengmian
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data, 88);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
					uni.navigateTo({
						url:"/pages/Setup/Settings"
					})
				}
				
			});
		},

		upload: function() {
			var _this = this;
			uni.chooseImage({
				count: 1,
				quality: 80,
				sizeType: ['original', 'compressed'],
				success: chooseImageRes => {
					console.log(chooseImageRes,88899)
					const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(chooseImageRes.tempFiles[0].size);
					_this.zhengmian = tempFilePaths[0];
					console.log(_this.zhengmian,67777)
					// // 2448884
					// if(chooseImageRes.tempFiles[0].size >= 1094377){
					//  toast('超大图片,请于pc端上传认证');
					//  _this.zhengmian = "../../../static/assert/mine/zhengmian@2x.png"
					//  return false
					// }
					// const uploadTask = uni.uploadFile({
					// 	url: 'https://exchangeapi.coinman.club/storage/uploadSingle', //仅为示例，非真实的接口地址
					// 	filePath: tempFilePaths[0],
					// 	name: 'file',
					// 	success: uploadFileRes => {

					// 		if (JSON.parse(uploadFileRes.data).code == 200) {
					// 			toast('上传成功');

					// 			this.front = JSON.parse(uploadFileRes.data).data;
					// 			console.log(this.front, '正面');
					// 			console.log(JSON.parse(uploadFileRes.data).data, 75555);
					// 		} else {
					// 			toast(JSON.parse(uploadFileRes.data).msg);
					// 		}
					// 	},

					// });
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.Storename {
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.stores {
		padding-top: 68upx;
		& > view:nth-child(1) {
			background: $bg1-color;
			padding-bottom: 32upx;
			& > view:nth-child(1) {
				padding: 0 24upx;

				& > view:nth-child(1) {
					font-size: 38upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: $bg6-color;
					padding-top: 70upx;
				}
				& > view:nth-child(2) {
					display: flex;
					align-items: center;
					margin-top: 34upx;
					& > view:nth-child(1) {
						width: 8upx;
						height: 8upx;
						background: $bg5-color;
					}
					& > view:nth-child(2) {
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: $bg5-color;
						margin-left: 14upx;
					}
				}
			}
			& > view:nth-child(2) {
				padding: 0 24upx;
				display: flex;
				align-items: center;

				& > view:nth-child(1) {
					width: 8upx;
					height: 8upx;
					background: $bg5-color;
				}
				& > view:nth-child(2) {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					margin-left: 14upx;
					& > text {
						color: $bg-color;
					}
				}
			}
		}

		& > view:nth-child(2) {
			margin-top: 20upx;
			padding: 23upx 0upx;
			background: $bg1-color;
			& > view:nth-child(1) {
				padding: 0 24upx;
				& > view:nth-child(1) {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg-color;
				}
				& > view:nth-child(2) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin: 58upx auto;
					border-bottom: 1upx solid #edf0fa;
					padding-bottom: 31upx;
					& > view:nth-child(1) {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: $bg6-color;
					}
					& > view:nth-child(2) {
						input {
							font-size: 32upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg5-color;
							background: none;
							border: none;
							text-align: right;
						}
					}
				}
				& > view:nth-child(3) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					& > view:nth-child(1) {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: $bg6-color;
					}

					image {
						width: 120upx;
						height: 120upx;
					}
				}
			}
		}
	}
	.Login {
		width: 93%;
		height: 112upx;
		margin: 0 auto;
		background: rgba(53, 57, 76, 1);
		border-radius: 56upx;
		font-size: 34upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg1-color;
		position: fixed;
		bottom: 36upx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
